<template>
  <div class="order-status inline-flex items-center space-x-2">
    <!-- 状态图标 -->
    <div
      :class="[
        'w-2 h-2 rounded-full',
        statusConfig.color
      ]"
    />
    
    <!-- 状态文本 -->
    <span :class="['text-sm font-medium', statusConfig.textColor]">
      {{ statusConfig.label }}
    </span>
  </div>
</template>

<script setup lang="ts">
import type { Order } from '~/types'

interface Props {
  status: Order['status']
}

const props = defineProps<Props>()

const statusMap: Record<Order['status'], { label: string; color: string; textColor: string }> = {
  pending: { label: '待支付', color: 'bg-yellow-500', textColor: 'text-yellow-700' },
  paid: { label: '已支付', color: 'bg-green-500', textColor: 'text-green-700' },
  cancelled: { label: '已取消', color: 'bg-gray-500', textColor: 'text-gray-700' },
  refunded: { label: '已退款', color: 'bg-red-500', textColor: 'text-red-700' },
}

const statusConfig = computed(() => statusMap[props.status])
</script>

